<template>
  <div class="titleBox">
    <p>ToDoList</p>
    <!-- <input placeholder="添加ToDo" @keyup.enter="sonadd($event)" /> -->
    <input placeholder="添加ToDo" @keyup.enter="sonadd" v-model.trim="inpContent"/>
  </div>
</template>

<script>
export default {
   data: function () {
    return {
      inpContent: "",
    };
  },
  methods: {
    // sonadd(e) {
    //   this.$emit("babaadd", e.target.value);
    //   e.target.value = "";
    // },
    sonadd() {
      this.$emit("babaadd", this.inpContent);
      this.inpContent = "";
    },
  },
};
</script>

<style lang="scss" scoped>
// scoped 声明当前样式只是用于当前组件
// lang="scss" 声明以scss语法进行写样式
.todo {
  .titleBox {
    width: 600px;
    line-height: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      width: 100px;
      line-height: 50px;
      color: #ddd;
      font-size: 24px;
      cursor: pointer;
    }
    input {
      width: 60%;
      height: 24px;
      text-indent: 10px;
      border-radius: 5px;
      border: none;
    }
  }
}
</style>